<template>
    <div class="address">
        <van-nav-bar title="新增收货地址" left-arrow @click-left="backUp"/>
        <van-address-edit
            class="address-add"
            :area-list="areaList"
            @save="onSave"
        />
    </div>
</template>
<script>
    import areaList from "@/assets/area.js";
    import api from "@/utils/restful";
    import {AddressEdit, Area, Toast} from "vant";

    export default {
        components: {
            [AddressEdit.name]: AddressEdit,
            [Area.name]: Area
        },
        data() {
            return {
                areaList
            };
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            onSave(e) {
                this.addAddress(e);
            },
            addAddress(e) {
                let params = {
                    token: localStorage.getItem("token"),
                    consignee: e.name,
                    telephone: e.tel,
                    province: e.province,
                    city: e.city,
                    region: e.county,
                    address: e.addressDetail,
                    areaCode: e.areaCode,
                };
                this.$axios({
                    method: "POST",
                    url: api.shippingAdd,
                    data: this.$qs.stringify(params)
                }).then(res => {
                    this.$toast(res.msg);
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1000);
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    .address {
        background-color: @borderColor;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .van-address-edit__buttons {
        background-color: @priColor;
    }
</style>